<template>
  <div class="content-box">
    <el-tabs>
      <el-tab-pane label="计算单元信息">
        <!-- <div class="btn-box"> -->
        <!-- <el-button type="primary">添加</el-button> -->
        <!-- </div> -->
        <el-table border :data="state.unitInfoCompute" style="width: 100%">
          <el-table-column show-overflow-tooltip prop="unitcd" label="单元编码" align="center" />
          <el-table-column show-overflow-tooltip prop="unitnm" label="单元名称" align="center" />
          <el-table-column show-overflow-tooltip prop="fcd" label="上游单元" align="center" />
          <el-table-column show-overflow-tooltip prop="ocd" label="下游单元" align="center" />
          <el-table-column
            show-overflow-tooltip
            prop="indcd"
            label="入流河道（节点）"
            align="center"
          />
          <!-- <el-table-column prop="inType" label="入流类型" align="center" /> -->
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="计算单元配置信息">
        <el-tabs>
          <el-tab-pane label="单元内预报断面映射">
            <div class="btn-box">
              <!-- <el-button type="primary">添加</el-button> -->
            </div>
            <el-table border :data="state.unitMapping" style="width: 100%" height="100">
              <el-table-column
                show-overflow-tooltip
                prop="blkcd"
                label="预报断面编码"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="blknm"
                label="预报断面名称"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="rvcd"
                label="单元内预报断面关联河道"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="计算单元水源配置">
            <div class="btn-box">
              <!-- <el-button type="primary">添加</el-button> -->
            </div>
            <el-table border :data="state.waterSource" style="width: 100%" height="150">
              <el-table-column
                show-overflow-tooltip
                prop="sourceType"
                label="水源类型"
                align="center"
                width="100px"
              >
                <template #default="{ row }">
                  {{ switchTypeWater(row.sourceType) }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="rvcd"
                label="水源输入(输出)河道编码"
                align="center"
                width="220px"
              />
              <el-table-column
                show-overflow-tooltip
                prop="upSource"
                label="水源输入上游河道编码"
                align="center"
                width="220px"
              />
              <el-table-column
                show-overflow-tooltip
                prop="inSource"
                label="外部水源输入编码"
                align="center"
                width="180px"
              />
              <el-table-column
                show-overflow-tooltip
                prop="inSourceType"
                label="外部水源输入类型"
                align="center"
                width="180px"
              >
                <template #default="{ row }">
                  {{ switchOutTypeWater(row.inSourceType) }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="outSource"
                label="出流（分洪）编码"
                align="center"
                width="180px"
              />
              <el-table-column
                show-overflow-tooltip
                prop="outSourceType"
                label="出流（分洪）类型"
                align="center"
                width="180px"
              >
                <template #default="{ row }">
                  {{ switchOutflowType(row.outSourceType) }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
  <!-- <hr /> -->
  <el-tabs v-model="activeTabName" class="demo-out-tabs" @tab-click="handleTabClick">
    <el-tab-pane label="参数配置信息" name="config">
      <div class="config-box">
        <div v-if="newConfig == 0">
          <span class="params-left">参数配置方案</span>
          <el-select
            v-model="state.schemeName"
            class="m-2"
            placeholder="请选择"
            @change="changeVal"
          >
            <el-option
              v-for="(item, index) in state.unitSchemes"
              :key="index"
              :label="item.scName"
              :value="item.id"
            />
          </el-select>
        </div>
        <!-- <div style="display: flex; align-items: center" v-else>
          <p>参数配置方案</p>
          <el-input type="primary" v-model="newConfigName"></el-input>
        </div> -->
        <div class="btn">
          <el-button type="primary" class="btn-pading" @click="handleEditParams(1)">新建</el-button>
          <!-- <el-button type="primary" class="btn-pading" @click="handleCreated" v-if="newConfig == 0"
            >新建</el-button
          > -->
          <!-- <el-button type="primary" class="btn-pading" @click="handleClosed" v-else>取消</el-button> -->
          <!-- <el-button
            type="success"
            class="btn-pading"
            @click="handleEditParams"
            v-if="newConfig == 0"
            >编辑</el-button
          > -->
          <el-button type="success" class="btn-pading" @click="handleEditParams(2)">编辑</el-button>
          <!-- <el-button type="success" class="btn-pading" @click="saveConfig" v-if="newConfig != 0"
            >保存</el-button
          > -->
          <el-button type="danger" class="btn-pading" @click="delBtn">删除</el-button>
        </div>
      </div>
      <div class="tabs-box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="雨量站配置" name="first">
            <div class="bottom">
              <div class="bianhao">
                <div class="tit">小流域编号</div>
                <div class="list">
                  <div
                    v-for="(item, index) in tableData"
                    :key="index"
                    :class="['list-item', currentCd == index ? 'active' : '']"
                    @click="handleClickUnit(item, index)"
                  >
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.wscd"
                      placement="top-start"
                    >
                      <div>{{ item.wscd }}</div>
                    </el-tooltip>
                    <el-button type="text" @click="handlePosition(item.wscd)">定位</el-button>
                  </div>
                </div>
              </div>
              <div class="table">
                <div class="btn">
                  <div>小流域关联雨量站</div>
                  <!-- <div>
                    <el-button type="primary" @click="handleAdd">导入Excel</el-button>
                    <el-button type="primary" @click="selectStation">添加雨量站</el-button>
                  </div>-->
                </div>
                <div class="table-tb">
                  <el-table border :data="table2Data" style="width: 100%" height="100%">
                    <el-table-column
                      prop="stcd"
                      label="站点编码"
                      show-overflow-tooltip
                      align="center"
                    />
                    <el-table-column
                      prop="stnm"
                      label="站点名称"
                      show-overflow-tooltip
                      align="center"
                    />
                    <el-table-column
                      prop="sttp"
                      label="站点类型"
                      show-overflow-tooltip
                      align="center"
                    >
                      <template #default="{ row }">{{ switchType(row.sttp) }}</template>
                    </el-table-column>
                    <el-table-column
                      prop="pw"
                      label="计算权重"
                      show-overflow-tooltip
                      align="center"
                    />
                    <!-- <el-table-column label="操作" align="center" width="160">
                      <template #default="{ row }">
                        <el-button type="text" @click="handleConfigWeight(row)">设置权重</el-button>
                        <el-button type="text" style="color: red" @click="delBtn(item.id)"
                          >删除</el-button
                        >
                      </template>
                    </el-table-column>-->
                  </el-table>
                </div>
                <!-- <div class="page">
                  <el-pagination
                    v-model:current-page="currentPage"
                    :page-size="10"
                    background
                    layout="total, prev, pager, next"
                    :total="100"
                  />
                </div>-->
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="模型参数" name="second">
            <div class="bottom-model-info">
              <div class="table">
                <div class="btn">
                  <div class="model-info">
                    <span
                      >计算单元计算参数：
                      <span class="a-title">{{ state.paramsName || '' }}</span>
                    </span>
                    <div class="right-box">
                      <el-upload
                        v-model:file-list="fileList"
                        class="upload-demo left-spacing"
                        action="#"
                        multiple
                        :http-request="uploadFile"
                        :show-file-list="false"
                      >
                        <el-button type="primary">导入参数文件</el-button>
                      </el-upload>
                      <el-button type="info" class="btn-plus" link @click="handleMaxParams">
                        <el-icon>
                          <FullScreen />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="table-tb">
                  <el-tabs v-model="state.activeNameThird" @tab-click="handleTabsParams">
                    <el-tab-pane label="小流域计算参数" name="first">
                      <div class="btn-box">
                        <el-button type="primary" v-if="!state.showEdit" @click="handleParamsModify"
                          >参数修改</el-button
                        >
                        <el-button type="success" v-if="state.showEdit" @click="handleParamsSave"
                          >保存</el-button
                        >
                        <el-button type="warning" v-if="state.showEdit" @click="handleParamsClose"
                          >取消</el-button
                        >
                      </div>
                      <el-table
                        border
                        :data="state.paramsFirst"
                        style="width: 100%"
                        @cell-mouse-enter="handleCellEnter"
                        @cell-mouse-leave="handleCellLeave"
                        @cell-click="handleCellClick"
                      >
                        <el-table-column
                          prop="wscd"
                          label="小流域编码"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="hruArea"
                          label="小流域单元面积"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="hruElev"
                          label="小流域单元平均高程（米）"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="soilTypeName"
                          label="小流域单元主要土壤类型"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="impervStorMax"
                          label="洼地平均蓄水量[mm]"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="covdenSum"
                          label="夏季植被覆盖密度[%]"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="srainIntcp"
                          label="夏季主要植被类型的截流能力[mm]"
                          show-overflow-tooltip
                          align="center"
                          width="300"
                        />
                        <el-table-column
                          prop="covdenWin"
                          label="冬季植被覆盖密度[%]"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="snowIntcp"
                          label="冬季主要植被类型的截流能力[mm]"
                          show-overflow-tooltip
                          align="center"
                          width="300"
                        />
                        <el-table-column
                          prop="hruGenTypeName"
                          label="响应单元编号"
                          show-overflow-tooltip
                          align="center"
                          width="100"
                        />
                        <el-table-column
                          prop="soil2gwMax"
                          label="土壤向地下水渗漏系数"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.soil2gwMax"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.soil2gwMax }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="slowcoefLin"
                          label="慢速壤中流线性系数"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.slowcoefLin"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.slowcoefLin }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="slowcoefSq"
                          label="慢速壤中流非线性系数"
                          align="center"
                          width="300"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.slowcoefSq"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.slowcoefSq }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="prefFlowDen"
                          label="土壤区用于地下水优先流的水分比例"
                          align="center"
                          width="300"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.prefFlowDen"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.prefFlowDen }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fastcoefLin"
                          label="快速壤中流线性系数"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.fastcoefLin"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.fastcoefLin }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fastcoefSq"
                          label="快速壤中流非线性系数"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.fastcoefSq"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.fastcoefSq }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="conductivity"
                          label="饱和水力传导度"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.conductivity"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.conductivity }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="porosity"
                          label="孔隙率"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="residualSaturation"
                          label="残余含水量"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="vgAlpha"
                          label="VG模型alpha"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="vgN"
                          label="VG模型n"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="layerTopDepth"
                          label="上层土壤厚度"
                          align="center"
                          width="150"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.layerTopDepth"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.layerTopDepth }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="layerDepth"
                          label="土壤厚度"
                          align="center"
                          width="150"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.layerDepth"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.layerDepth }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="initialWaterContent"
                          label="初始土壤含水率"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.initialWaterContent"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.initialWaterContent }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fieldCapacity"
                          label="田间持水量"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="dprstDepth"
                          label="dprst厚度"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="dprstStorageInit"
                          label="dprst初始流量"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="河道计算参数" name="second">
                      <div class="btn-box">
                        <el-button type="primary" v-if="!state.showEdit" @click="handleParamsModify"
                          >参数修改</el-button
                        >
                        <el-button type="success" v-if="state.showEdit" @click="handleParamsSave"
                          >保存</el-button
                        >
                        <el-button type="warning" v-if="state.showEdit" @click="handleParamsClose"
                          >取消</el-button
                        >
                      </div>
                      <el-table border :data="state.paramsSecond" style="width: 100%">
                        <el-table-column
                          prop="rvcd"
                          label="河段编码"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="chanAlpha"
                          label="运动波参数α"
                          align="center"
                          width="150"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.chanAlpha"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.chanAlpha }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="chanCmp"
                          label="运动波参数m"
                          align="center"
                          width="150"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.chanCmp"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.chanCmp }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="chanLength"
                          label="河段长度"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="chanNdx"
                          label="坡面汇流参数"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="chanRough"
                          label="曼宁系数"
                          show-overflow-tooltip
                          align="center"
                        />
                        <!-- <el-table-column prop="wsnm" label="小流域名称" show-overflow-tooltip align="center" /> -->
                        <el-table-column
                          prop="chanRouteTime"
                          label="运动波系数演进时间"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="chanSlope"
                          label="河底比降"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="chanT3Lbratio"
                          label="左岸系数"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="chanT3Rbratio"
                          label="右岸系数"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="chanThresh"
                          label="河段运动波系数thresh"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <!--  -->
                        <el-table-column prop="chanType" label="河段类型" align="center">
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.chanType"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.chanType }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="chanWidth"
                          label="河宽"
                          show-overflow-tooltip
                          align="center"
                        />

                        <el-table-column
                          prop="resInit"
                          label="水库的汇流参数-水库初始蓄水量"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="resLow"
                          label="水库的汇流参数-死库容"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="resUp"
                          label="水库的汇流参数-最大库容"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="chanQInit"
                          label="河道初始流量"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column prop="lag" label="滞后时间" align="center">
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.lag"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.lag }}</div>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="运动波参数" name="third">
                      <div class="btn-box">
                        <el-button type="primary" v-if="!state.showEdit" @click="handleParamsModify"
                          >参数修改</el-button
                        >
                        <el-button type="success" v-if="state.showEdit" @click="handleParamsSave"
                          >保存</el-button
                        >
                        <el-button type="warning" v-if="state.showEdit" @click="handleParamsClose"
                          >取消</el-button
                        >
                      </div>
                      <el-table border :data="state.paramsThird" style="width: 100%">
                        <el-table-column
                          prop="wscd"
                          label="小流域编码"
                          show-overflow-tooltip
                          align="center"
                        />
                        <el-table-column
                          prop="ofpAlpha"
                          label="运动波坡面汇流参数α"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.ofpAlpha"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.ofpAlpha }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="ofpCmp"
                          label="运动波坡面汇流参数m"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.ofpCmp"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.ofpCmp }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="ofpHru"
                          label="汇流坡面对应的hru计算单元"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="ofpImpareaPercent"
                          label="坡面不透水面积百分比"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="ofpImpvAlpha"
                          label="坡面不透水面积的运动波汇流参数α"
                          show-overflow-tooltip
                          align="center"
                          width="250"
                        />
                        <el-table-column
                          prop="ofpImpvCmp"
                          label="坡面不透水面积的运动波汇流参数m"
                          show-overflow-tooltip
                          align="center"
                          width="250"
                        />
                        <el-table-column
                          prop="ofpLength"
                          label="运动波汇流长度"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="ofpNdx"
                          label="是否有坡面汇流"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="ofpRough"
                          label="运动波系数rough"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <!-- <el-table-column prop="wsnm" label="小流域名称" show-overflow-tooltip align="center" /> -->
                        <el-table-column
                          prop="ofpRouteTime"
                          label="运动波系数演进时间"
                          show-overflow-tooltip
                          align="center"
                          width="200"
                        />
                        <el-table-column
                          prop="ofpSlope"
                          label="运动波系数坡度"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="ofpThresh"
                          label="运动波系数thresh"
                          show-overflow-tooltip
                          align="center"
                          width="150"
                        />
                        <el-table-column
                          prop="ofpType"
                          label="运动波系数坡面类型"
                          align="center"
                          width="200"
                        />
                        <el-table-column prop="tb" label="运动波系数Tb" align="center" width="150">
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.tb"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.tb }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="tp" label="运动波系数Tp" align="center" width="150">
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.tp"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.tp }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <!--  -->
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="壤中流参数" name="five">
                      <div class="btn-box">
                        <el-button type="primary" v-if="!state.showEdit" @click="handleParamsModify"
                          >参数修改</el-button
                        >
                        <el-button type="success" v-if="state.showEdit" @click="handleParamsSave"
                          >保存</el-button
                        >
                        <el-button type="warning" v-if="state.showEdit" @click="handleParamsClose"
                          >取消</el-button
                        >
                      </div>
                      <el-table border :data="state.paramsFive" style="width: 100%">
                        <el-table-column
                          prop="ssstorInit"
                          label="重力水库含水量初值"
                          align="center"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.ssstorInit"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.ssstorInit }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="ssr2gwExp"
                          label="重力水库向地下水库出流的非线性参数"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.ssr2gwExp"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.ssr2gwExp }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="ssr2gwRate"
                          label="重力水库向地下水库出流的线性参数"
                          align="center"
                          width="200"
                        >
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.ssr2gwRate"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.ssr2gwRate }}</div>
                            </div>
                          </template>
                        </el-table-column>

                        <!--  -->
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="地下水库参数" name="fourth">
                      <div class="btn-box">
                        <el-button type="primary" v-if="!state.showEdit" @click="handleParamsModify"
                          >参数修改</el-button
                        >
                        <el-button type="success" v-if="state.showEdit" @click="handleParamsSave"
                          >保存</el-button
                        >
                        <el-button type="warning" v-if="state.showEdit" @click="handleParamsClose"
                          >取消</el-button
                        >
                      </div>
                      <el-table border :data="state.paramsFourth" style="width: 100%">
                        <el-table-column prop="wscd" label="小流域编码" align="center" />
                        <el-table-column prop="gwflowCoef" label="产流系数" align="center">
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.gwflowCoef"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.gwflowCoef }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="gwsinkCoef" label="渗漏系数" align="center">
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.gwsinkCoef"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.gwsinkCoef }}</div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="gwstorInit" label="初始含水量" align="center">
                          <template #default="{ row }">
                            <div class="item">
                              <el-input
                                v-if="state.showEdit"
                                class="item__input"
                                v-model="row.gwstorInit"
                                placeholder="请输入内容"
                              ></el-input>
                              <div class="item__txt" v-else>{{ row.gwstorInit }}</div>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-tab-pane>
    <el-tab-pane label="基础信息" name="info">
      <div class="info-base">
        <div class="peizhi">
          <div>
            <span>计算单元流域信息</span>
          </div>
          <!-- <div class="btn">
          <el-button type="primary" @click="handleConfig">配置单元小流域</el-button>
        </div>-->
        </div>
        <div class="table-tb jsdy">
          <el-table border :data="tableData" style="width: 100%" height="100%">
            <el-table-column prop="wscd" label="小流域编码" show-overflow-tooltip align="center" />
            <!-- <el-table-column prop="wsnm" label="小流域名称" show-overflow-tooltip align="center" /> -->
            <el-table-column prop="iwscd" label="上游流域" show-overflow-tooltip align="center" />
            <el-table-column prop="owscd" label="下游流域" show-overflow-tooltip align="center" />
            <el-table-column prop="ondcd" label="出口节点" show-overflow-tooltip align="center" />
            <el-table-column prop="wsarea" label="流域面积" show-overflow-tooltip align="center" />
          </el-table>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <!-- 弹窗 -->
  <importFile :dialogVisible="showDialog" @closeDialog="closeDig" />
  <configXdy :dialogVisible="showXdyDialog" @closeDialog="closeDig" />
  <station
    :dialogVisible="showStationDialog"
    @closeDialog="closeDig"
    @handleSelect="handleSelect"
  />
  <el-dialog
    title="修改雨量站权重"
    v-model="showSitesDialog"
    width="30%"
    :before-close="handleWeightClose"
  >
    <div class="weight-box">
      <span>权重：</span>
      <el-input v-model="state.weightForm.pw" placeholder="请输入"></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleWeight">确定</el-button>
        <el-button type="primary" @click="handleWeightClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <params-config-plan ref="paramsConfigPlanRef" @saveParamsPlan="saveConfig" />
  <model-params
    ref="modelParamsRef"
    @handleBackClickChangeVal="changeVal(scid)"
    @handleSaveBack="handleDialogSaveBack"
  />
</template>

<script setup>
import importFile from './importYlzFile.vue'
import ModelParams from './c-cpns/model-params.vue'
import configXdy from './configXdy.vue'
import ParamsConfigPlan from './c-cpns/params-config-plan.vue'
import station from './station.vue'
import { onUnmounted, reactive, ref, watch } from 'vue'
import Papa from 'papaparse'
import emitter from '@/utils/bus'
//查询预报断面对应计算单元
import {
  getForecastSectionUnit,
  getUnitWatas,
  getSkbyCalUnits,
  getSkbyWatas,
  getSkbyCalUnitRainSites,
  // 查询时空变源参数信息
  getSkbyParams,
  setSkbyDelRainSites,
  saveSkbyConfig,
  getSkbyParamSchemes,
  getSectionInfo,
  addRiverMap,
  editRiverMap,
  // 修改权重
  updateSkbyRainPw,
  // 查看时空变源-流域参数
  getParamsWata,
  // 查看时空变源-河道参数
  getParamsRiver,
  // 查看时空变源-运动波参数
  getParamsNofpl,
  // 查看时空变源-地下水库参数
  getParamsNgw,
  //查看时空变源-嚷中流参数
  paramsNssr,
  // 查询计算单元对应的预报断面
  getSkbyCalUnitSections,
  // 查询计算单元对应的水源信息
  getSkbyCalUnitSources,
  //上传时空变源参数文件
  uploadSkby,
  saveParamsScheme,
  saveParams,
  //
  modifyParamsWata,
  modifyParamsRiver,
  modifyParamsNofpl,
  modifyParamsNgw,
  modifyParamsNssr
} from '@/services/modules/model-config'
import { ElMessage } from 'element-plus'
const modelParamsRef = ref(null)
const props = defineProps({
  modelobj: {
    type: Object,
    default: () => {}
  },
  sectionObj: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => {
    props.sectionObj
  },
  () => {
    state.unitInfoCompute = [props.sectionObj]
    console.log(props.sectionObj, 9527)
    acceptUnitSections(props.sectionObj?.id)
  },
  {
    deep: true
  }
)
// 放大参数方案
const handleMaxParams = () => {
  modelParamsRef.value.handleOpenModelParams(state.paramsName, state.schemeName, state.paramsId)
}
function handleParamsModify() {
  state.showEdit = true
}
// 弹框参数修改 保存回调
const handleDialogSaveBack = (activeVal) => {
  // 选择的tab
  state.activeNameThird = activeVal
  handleParamsClose()
}
function handleParamsSave() {
  state.showEdit = false
  switch (state.activeNameThird) {
    case 'first':
      modifyParamsWata(state.paramsFirst).then((res) => {
        if (res.code === 200) {
          getParamsWata({ pmid: state.paramsId }).then((res) => {
            if (res.code == 200) {
              state.paramsFirst = res.data
            }
          })
        }
      })
      break
    case 'second':
      modifyParamsRiver(state.paramsSecond).then((res) => {
        if (res.code === 200) {
          // 查看时空变源-河道参数
          getParamsRiver({ pmid: state.paramsId }).then((res) => {
            if (res.code == 200) {
              state.paramsSecond = res.data
            }
          })
        }
      })
      break
    case 'third':
      modifyParamsNofpl(state.paramsThird).then((res) => {
        if (res.code === 200) {
          // 查看时空变源-运动波参数
          getParamsNofpl({ pmid: state.paramsId }).then((res) => {
            if (res.code == 200) {
              state.paramsThird = res.data
            }
          })
        }
      })
      break
    case 'fourth':
      modifyParamsNgw(state.paramsFourth).then((res) => {
        if (res.code === 200) {
          // 查看时空变源-地下水库参数
          getParamsNgw({ pmid: state.paramsId }).then((res) => {
            if (res.code == 200) {
              state.paramsFourth = res.data
            }
          })
        }
      })
      break
    case 'five':
      modifyParamsNssr(state.paramsFive).then((res) => {
        if (res.code === 200) {
          //  查看时空变源-嚷中流参数

          paramsNssr({ pmid: state.paramsId }).then((res) => {
            if (res.code == 200) {
              state.paramsFive = res.data
            }
          })
        }
      })
      break

    default:
      break
  }
}
function handleParamsClose() {
  state.showEdit = false
  switch (state.activeNameThird) {
    case 'first':
      getParamsWata({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsFirst = res.data
        }
      })
      break
    case 'second':
      // 查看时空变源-河道参数
      getParamsRiver({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsSecond = res.data
        }
      })
      break
    case 'third':
      // 查看时空变源-运动波参数
      getParamsNofpl({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsThird = res.data
        }
      })
      break
    case 'fourth':
      // 查看时空变源-地下水库参数
      getParamsNgw({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsFourth = res.data
        }
      })
      break
    case 'five':
      paramsNssr({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsFive = res.data
        }
      })

      break
    default:
      break
  }
}
//上传csv格式
async function uploadFile(params) {
  var { file } = params
  var formData = new FormData()
  formData.append('file', file)
  let res = await uploadSkby(formData)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    let params = {
      scid: state.schemeName,
      pmUrl: res.data.url,
      id: state.paramsId || undefined
    }
    saveParams(params).then((res) => {
      if (res.code === 200) {
        changeVal(state.schemeName)
      }
    })
    // form1.attachId = res.data.id
    // attachUrl.value = res.data.url
  }
}
const acceptUnitSections = (id) => {
  // 查询计算单元对应的预报断面
  getSkbyCalUnitSections({ uid: id }).then((res) => {
    if (res.code == 200) {
      state.unitMapping = res.data
    }
  })
  // 查询计算单元对应的预报断面
  getSkbyCalUnitSources({ uid: id }).then((res) => {
    if (res.code == 200) {
      state.waterSource = res.data
    }
  })
}
const newConfig = ref(0)
// const newConfigName = ref('')

let showStationDialog = ref(false)
let showSitesDialog = ref(false)
const selectStation = () => {
  showStationDialog.value = true
}
// 关闭修改权重弹框 并清空
const handleWeightClose = () => {
  state.weightForm.pw = ''
  state.weightForm.id = ''
  showSitesDialog.value = false
}
// 提交修改权重
const handleWeight = () => {
  updateSkbyRainPw({ id: state.weightForm.id, pw: state.weightForm.pw }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('修改成功')
      handleWeightClose()
      handleClickUnit(state.otherObj, currentCd.value)
    }
  })
}
//showXdyDialog
let showDialog = ref(false)
let showXdyDialog = ref(false)
//设置权重
function handleConfigWeight(row) {
  state.weightForm.pw = row.pw
  state.weightForm.id = row.id
  showSitesDialog.value = true
}
const handleAdd = () => {
  showDialog.value = true
}
const handleConfig = () => {
  showXdyDialog.value = true
}
const closeDig = (v) => {
  showDialog.value = v
  showXdyDialog.value = v
  showStationDialog.value = v
}
const switchType = (key) => {
  switch (key) {
    case 'MM':
      return '气象站'
    case 'BB':
      return '蒸发站'
    case 'DD':
      return '堰闸水文站'
    case 'TT':
      return '潮位站'
    case 'DP':
      return '泵站'
    case 'SS':
      return '墒情站'
    case 'PP':
      return '雨量站'
    case 'ZZ':
      return '河道水位水文站'
    case 'RR':
      return '水库水文站'
    case 'ZG':
      return '地下水站'
    case 'ZB':
      return '分洪水位站'
    default:
      break
  }
}
const activeName = ref('first')
const showModelParaIndex = ref(0)
// 点击单元编码
// function handleClicModelPara(item, index) {
//   showModelParaIndex.value = index
//   getSkbyParams({ uid: item.id }).then((res) => {
//     if (res.code === 200) {
//       state.paramsName = res.data.pmName
//       state.paramsId = res.data.id
//       acceptParams(res.data?.id)
//     }
//   })
// }
//切换参数
function handleTabsParams(item) {
  switch (state.activeNameThird) {
    case 'first':
      getParamsWata({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsFirst = res.data
        }
      })
      break
    case 'second':
      // 查看时空变源-河道参数
      getParamsRiver({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsSecond = res.data
        }
      })
      break
    case 'third':
      // 查看时空变源-运动波参数
      getParamsNofpl({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsThird = res.data
        }
      })
      break
    case 'fourth':
      // 查看时空变源-地下水库参数
      getParamsNgw({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsFourth = res.data
        }
      })
      break
    case 'five':
      paramsNssr({ pmid: state.paramsId }).then((res) => {
        if (res.code == 200) {
          state.paramsFive = res.data
        }
      })

      break
    default:
      break
  }
  state.showEdit = false
}
// 获取参数
const acceptParams = (id) => {
  // 查看时空变源-流域参数
  getParamsWata({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsFirst = res.data
    }
  })
  // 查看时空变源-河道参数
  getParamsRiver({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsSecond = res.data
    }
  })
  // 查看时空变源-运动波参数
  getParamsNofpl({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsThird = res.data
    }
  })
  // 查看时空变源-地下水库参数
  getParamsNgw({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsFourth = res.data
    }
  })
  //  查看时空变源-嚷中流参数

  paramsNssr({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsFive = res.data
    }
  })
}
// const activeTabName = ref('info')
const activeTabName = ref('config')
const radio2 = ref(0)
const paramsConfigPlanRef = ref(null)
const canEdit = ref(0)
const handleEdit = () => {
  canEdit.value = canEdit.value == 0 ? 1 : 0
}

//改变
function changeVal(value) {
  state.schemeName = value
  state.schemeId = value
  let arr = state.unitSchemes.filter((item) => {
    return item.id == value
  })
  // 当前选中方案名称
  state.schemeNameId = arr[0].scName
  state.back = arr[0].back
  state.paramsName = ''
  state.paramsId = ''
  getSkbyParams({ uid: state.secId, scid: value }).then((res) => {
    if (res.code === 200 && res?.data) {
      state.paramsName = res.data.pmName
      state.paramsId = res.data.id
      acceptParams(res.data?.id)
    } else {
      state.paramsFirst = []
      state.paramsSecond = []
      state.paramsThird = []
      state.paramsFourth = []
      state.paramsFive = []
    }
  })
  // getSkbyParams({ uid: value }).then((res) => {
  //   if (res.code === 200) {
  //     console.log(res.data, '参数雄细心')
  //   }
  // })
}
//编辑新建参数
function handleEditParams(val) {
  state.schemeId = state.schemeName
  if (val == 1) {
    state.schemeId = ''
  }
  // 打开弹框传递名称和备注
  if (state.schemeId) {
    paramsConfigPlanRef.value.handleOpenModal(state.schemeNameId, state.back)
  } else {
    paramsConfigPlanRef.value.handleOpenModal('', '')
  }

  // newConfig.value = 1
  // newConfigName.value = state.schemeNameId
}
const currentCd = ref(0) //默认选中小流域编号
//定位小流域
function handlePosition(item) {
  emitter.emit('positionWata', item)
}
//
function handleClick() {}
//点击小流域编号
function handleClickUnit(item, index) {
  // 储存点击id小流域编号
  state.otherObj = item
  currentCd.value = index
  getSkbyCalUnitRainSites({
    uid: state.secId,
    wscd: item.wscd,
    mid: props.modelobj.id
  }).then((res) => {
    if (res.code === 200) {
      table2Data.value = res.data
    }
  })
}
const refFile = ref(null)
function importCsv() {
  let selectedFile = null
  selectedFile = refFile.value.files[0]
  console.log(selectedFile)
  if (selectedFile === undefined) {
    return
  }
  var reader = new FileReader()
  reader.readAsDataURL(selectedFile)
  reader.onload = (evt) => {
    // 检查编码
    // let encoding = this.checkEncoding(evt.target.result);
    // 将csv转换成二维数组
    Papa.parse(selectedFile, {
      // encoding: encoding,
      complete: (res) => {
        // UTF8 \r\n与\n混用时有可能会出问题
        let data = res.data
        if (data[data.length - 1] == '') {
          //去除最后的空行
          data.pop()
        }
        // Reflect.set(state.inUnitInfos[showModelParaIndex], 'params', data.flat(Infinity))
        // state.inUnitInfos[showModelParaIndex].params = data.flat(Infinity)
        console.log(data.flat(Infinity)) // data就是文件里面的数据
      }
    })
  }
}
const state = reactive({
  showEdit: false,
  unitInfoCompute: [],
  paramsId: '',
  weightForm: {},
  inUnitInfos: [], //入流信息
  unitSchemes: [], //计算单元方案
  schemeName: '', //方案名称
  schemeId: '',
  unitWatasArr: [], //单元小流域,
  nodeInfo: {
    outCode: '1'
  },
  secId: '',
  schemeNameId: '',
  back: '',
  // 存储点击的小流域编号
  otherObj: {},
  // 计算单元计算参数文件名
  paramsName: '',
  activeNameThird: 'first',
  // 小流域计算参数
  paramsFirst: [],
  // 河道计算参数
  paramsSecond: [],
  // 运动波参数
  paramsThird: [],
  // 地下水库参数
  paramsFourth: [],
  //嚷中流参数
  paramsNssr: [],
  // 单元内预报断面映射
  unitMapping: [],
  // 计算单元水源配置
  waterSource: []
})
const tableData = ref([])
const table2Data = ref([])
const paramsObj = reactive({
  pageNum: 1,
  pageSize: 10,
  modelId: 1
})
const value = ref('1')
let navId = ref(1)
const nav_list = [
  {
    id: 1,
    name: '雨量站点配置'
  },
  {
    id: 2,
    name: '模型参数'
  }
]
const getNav = (e) => {
  navId.value = e
}
const blkcd = ref(null)
function getSkbyParamSchemesList(blkcd) {
  state.unitSchemes = []
  state.schemeName = ''
  getSkbyParamSchemes({
    uid: blkcd
  }).then((res) => {
    if (res.code === 200) {
      state.unitSchemes = res.data
      if (state.unitSchemes.length > 0) {
        changeVal(state.unitSchemes[0].id)
      }
    }
  })
}
emitter.on('secInfo', async (value) => {
  blkcd.value = value.blkcd
  state.secId = value.id
  tableData.value = []
  table2Data.value = []
  await getSkbyCalUnits({ blkcd: value.blkcd, mid: props.modelobj.id }).then((res) => {
    if (res.code === 200) {
      state.inUnitInfos = res.data
      // 默认首先选中第一个单元编码
      // handleClicModelPara(state.inUnitInfos[0], 0)
      let _uid = value.id
      if (res.data.length > 0) {
        // getSkbyWatas({ unitcd: _unitcd, mid: props.modelobj.id }).then((res) => {
        //   if (res.code === 200) {
        //     tableData.value = res.data
        //     getSkbyCalUnitRainSites({
        //       unitcd: _unitcd,
        //       wscd: res.data[0].wscd,
        //       mid: props.modelobj.id
        //     }).then((res) => {
        //       if (res.code === 200) {
        //         table2Data.value = res.data
        //       }
        //     })
        //   }
        // })
        getSkbyWatas({ uid: _uid }).then((res) => {
          if (res.code === 200 && res.data?.length) {
            tableData.value = res.data
            getSkbyCalUnitRainSites({
              uid: _uid,
              wscd: res.data[0].wscd,
              mid: props.modelobj.id
            }).then((res) => {
              if (res.code === 200) {
                table2Data.value = res.data
              }
            })
          }
        })
        // getSkbyParams({ unitcd: _unitcd, mid: props.modelobj.id }).then((res) => {
        //   if (res.code === 200) {
        //     state.unitSchemes = [res.data]
        //   }
        // })
      }

      /* state.outCode = res.data.outCode
      state.unitSchemes = res.data.unitSchemes
      state.schemeName = res.data.unitSchemes[0].schemeName
      state.paramsName = res.data.unitSchemes[0].paramsName */
    }
  })
  getSkbyParamSchemesList(state.secId)
  //
  await getSectionInfo({ blkcd: value.blkcd, id: value.id }).then((res) => {
    if (res.code === 200) {
      state.riverMap = res.data.riverMap
      radio2.value = res.data.riverMap.relType
      state.nodeInfo.outCode = res.data.riverMap.relCode
    }
  })
  /* await getUnitWatas({ ...paramsObj, blkcd: value.id }).then((res) => {
    if (res.code === 200) {
      state.unitWatasArr = res.rows
    }
  }) */
})
onUnmounted(() => {
  emitter.off('secInfo')
})

// 新建
// function handleCreated() {
//   newConfig.value = 1
//   state.schemeId = ''
//   state.rainTableData = []
//   newConfigName.value = ''

//   emitter.emit('createConfig', {})
// }
//取消配置
// function handleClosed() {
//   newConfig.value = 0
//   state.schemeId = state.schemeName
//   state.rainTableData = []
//   emitter.emit('createConfig', {})
// }
const siteInfo = ref([]) //选择的站点
const handleSelect = (item) => {
  let _arr = JSON.parse(JSON.stringify(item))
  let _info = []
  for (let i = 0; i < _arr.length; i++) {
    _info.push({
      stcd: _arr[i].id,
      pw: ''
    })
  }
  siteInfo.value = _info
}
//保存saveConfig
const saveConfig = (form) => {
  let params = {}
  if (state.schemeId) {
    params = {
      scName: form.newConfigName,
      uid: state.secId,
      mid: 1,
      id: state.schemeName,
      back: form.back
    }
  } else {
    params = {
      scName: form.newConfigName,
      uid: state.secId,
      mid: 1,
      back: form.back
    }
  }
  saveParamsScheme(params).then((res) => {
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: res.msg
      })
      newConfig.value = 0
      getSkbyParamSchemesList(state.secId)
    }
  })
  // console.log('保存saveConfig')
  // console.log('editorRef.value.xxxx:', JSON.parse(JSON.stringify(editorRef.value.state)))
  // let _wataRains = []
  // for (let i = 0; i < siteInfo.value.length; i++) {
  //   _wataRains.push({
  //     wscd: state.inUnitInfos[0].unitcd,
  //     sites: siteInfo.value[i]
  //   })
  // }
  // let _unitParams = []
  // for (let i = 0; i < state.inUnitInfos.length; i++) {
  //   _unitParams.push({
  //     uid: state.inUnitInfos[i].id,
  //     unitcd: state.inUnitInfos[i].unitcd,
  //     params: state.inUnitInfos[i].params
  //   })
  // }
  // let _params = {
  //   wataRains: _wataRains,
  //   blkcd: blkcd.value, //预报断面编码
  //   scName: newConfigName.value,
  //   unitcd: state.inUnitInfos[0].unitcd,
  //   pmid: 45,
  //   unitParams: _unitParams,
  //   id: state.schemeName || undefined
  // }
  // console.log(_params, '123')
  // saveSkbyConfig(_params).then((res) => {
  //   if (res.code === 200) {
  //     ElMessage({
  //       type: 'success',
  //       message: '配置成功'
  //     })
  //     newConfig.value = 0
  //     getSkbyParamSchemesList(state.secId)
  //     // getSkbyParams()
  //   }
  // })
  // let _state = JSON.parse(JSON.stringify(editorRef.value.state))
  // let _params = {
  //   // id: '',
  //   scName: newConfigName.value,
  //   mid: props.modelobj.id,
  //   blkcd: blkcd.value, //预报断面编码
  //   unitRainSites: {
  //     clcd: state.unitTableData[0].clcd,
  //     sites: siteInfo.value
  //   },
  //   clParams: _state.unitParams,
  //   hlParams: _state.riverParams,
  //   evolParams: {
  //     unitEvol: _state.unitTableData,
  //     inEvol: _state.upSectionArr
  //   }
  // }
  // console.log(JSON.stringify(_params))
}
//删除配置
const delConfig = (id) => {
  ElMessageBox.confirm('此操作将永久删除该配置, 是否继续?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      delConfig({
        id: id
      }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
        }
      })
    })
    .catch(() => {})
}
//删除配置
const delBtn = (id) => {
  ElMessageBox.confirm('此操作将永久删除该配置, 是否继续?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      setSkbyDelRainSites({
        id: state.schemeId
      }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getSkbyParamSchemesList(state.secId)
        }
      })
    })
    .catch(() => {})
}
// 判断水源类型
const switchTypeWater = (type) => {
  switch (type) {
    case -1:
      return '无'

    case 0:
      return '上游输入'

    case 1:
      return '站点输入'

    case 2:
      return '出游'

    default:
      break
  }
}
// 判断外部水源类型
const switchOutTypeWater = (type) => {
  switch (type) {
    case -1:
      return '无'
    case 0:
      return '水库'

    case 1:
      return '水文站'

    case 2:
      return '分洪输入'

    default:
      break
  }
}
// 判断出流类型
const switchOutflowType = (type) => {
  switch (type) {
    case -1:
      return '无'
    case 0:
      return '出流'

    case 1:
      return '分流'

    default:
      break
  }
}
</script>

<style lang="less" scoped>
.content-box {
  height: 310px;
  padding: 15px 0;

  :deep(.el-tabs) {
    .el-tabs__content {
      padding: 0 !important;
    }
  }

  .btn-box {
    text-align: right;
    margin-bottom: 5px;
  }
  :deep(.el-table) {
    // height: 200px;
    height: 100%;
  }
  :deep(.el-tabs) {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 55px);
      padding: 10px;
      .el-tab-pane {
        // height: 100%;
        height: 100%;
      }
    }
  }
}
.weight-box {
  display: flex;
  align-items: center;

  :deep(.el-input) {
    width: 80%;
  }
}

.model-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right-box {
    display: flex;
    justify-content: space-between;
    width: 200px;
    height: 100%;
  }
  .btn-plus {
    position: absolute;
    margin-top: 0;
    right: 15px;
    font-size: 25px;
    font-weight: bold;
  }
  // margin-left: 20px;

  // justify-content: space-around;
  .a-title {
    color: #0054db;
    cursor: pointer;
    margin-right: 10px;
  }

  .in {
    width: 200px;
    margin: 0 1 0px;
  }
}
.title {
  margin: 20px 0 0 20px;
  color: var(--fold-word-color);
}

.tabs-box {
  // padding: 10px;
  box-sizing: border-box;
  height: calc(100% - 50px);
  :deep(.el-tabs) {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 55px);
      // padding: 10px;
      .el-tab-pane {
        // height: 100%;
        height: 100%;
        .btn-box {
          text-align: right;
          .el-button {
            margin-bottom: 10px;
            margin-right: 20px;
          }
        }

        .el-table {
          height: calc(100% - 50px);
        }
      }
    }
  }
}
.demo-tabs,
:deep(.el-tab-pane),
:deep(.el-tabs__content),
:deep(.el-tabs--border-card) {
  height: 100%;
  .bottom-model-info {
    width: 100%;
    height: 100%;
    .table {
      height: calc(100% - 50px);
      margin: 0 !important;
    }
  }
}

// .demo-out-tabs,
// :deep(.el-tab-pane),
// :deep(.el-tabs__content),
// :deep(.el-tabs--border-card) {
//   height: 100%;
// }
.demo-out-tabs {
  width: calc(100% - 30px);
  // margin: 0 15px;
  height: calc(100% - 400px);
  :deep(.el-tabs__content) {
    height: calc(100% - 60px);
  }

  .info-base {
    height: 100%;
    // padding-left: 10px;
    .peizhi {
      height: 30px;
      line-height: 30px;
      color: #6cb5fe;
    }
  }
  .config-box {
    height: 30px;
    width: 100%;
    box-sizing: border-box;
    // padding-left: 10px;
    display: flex;
    justify-content: space-between;
    color: #797979;
    // margin-left: 15px;
    // .params-left {
    //   margin-left: 15px !important;
    // }
    :deep(.el-select) {
      width: 300px;
    }
    :deep(.el-input) {
      width: 300px;
    }
    p {
      width: 140px;
      margin-right: 10px;
    }
    .btn {
      margin-right: 10px;
    }
  }
}
.m-2 {
  margin-left: 20px;
}

.btn {
  // margin-right: 20px;
}

.right-box-nav {
  display: flex;
  // justify-content: space-around;
  cursor: pointer;
  margin-bottom: 20px;

  // margin-left: 20px;
  div {
    margin-left: 20px;
  }
}

.show {
  color: blue;
  text-decoration: underline;
}

.bottom {
  display: flex;
  height: 100%;
}

.bianhao {
  width: 200px;
  height: 100%;
  background-color: #fff;
  // margin-left: 20px;
  .tit {
    height: 30px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 30px;
    width: 200px;
    position: sticky;
    top: 0px;
  }
  .list {
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;
    background: #d7d4d427;
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 10px;
      cursor: pointer;
      div {
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        white-space: nowrap; /*规定段落中的文本不进行换行 */
        width: 100%; /*需要配合宽度来使用*/
      }

      &.active {
        background-color: #f2f2f2;
        color: #0054db;
      }
    }
  }
}

.table {
  margin: 0 10px;
  width: calc(100%);
  background-color: #fff;

  .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;

    color: #797979;
  }

  .table-tb {
    width: 100%;
    // height: calc(100% - 1px);
    height: 100%;
    margin-top: 10px;
  }
  .page {
    display: flex;
    margin-top: 20px;
    justify-content: flex-end;
  }
}
.table-tb.jsdy {
  width: 100%;
  height: calc(100% - 80px);
  margin-top: 10px;
}
</style>
